<template>
  <div class="padding-all">
    <SearchForm
      :form-item-list="formItemList"
      :list-page="listPage"
      @searchPage="searchPageFn"
      @resetEvent="resetPage"
    />
    <TabelForm
      :title="title"
      :row-item="rowItem"
      :text-tabel="textTabel"
      :list-page="listPage"
      :obj-data="objData"
      :table-data="tableData"
      :list-table="listTable"
      @submitStatusFn="submitStatus"
      @handleCurrentChangeFn="handleCurrentChange"
      @handleSizeChangeFn="handleSizeChange"
      @handleClickFn="handleClick"
      @changeStatus="changeStatusFn"
      @createdItem="$router.push({name: 'details',params: {id:'null' }
      })"
    />
  </div>
</template>

<script>
import { warehousePage, putWarehouse } from '@/api'

export default {

  data() {
    return {
      formItemList: [
        { type: 'input', label: '仓库编号', param: 'like_code' },
        { type: 'input', label: '仓库名称', param: 'like_name' },
        { type: 'select', label: '仓库状态', param: 'status', selectOptions: [{
          value: null,
          name: '全部'
        },
        {
          value: 0,
          name: '停用'
        },
        {
          value: 1,
          name: '启用'
        }] }
      ],
      textTabel: { //
        labelName4: '创建仓库'
      },
      rowItem: {}, // 当前选中项
      statusShow: false, // 切换状态弹出层
      objData: {},
      listPage: {
        like_code: '', // 仓库编号
        like_name: '', // 创库名称
        status: null, // 状态
        size: 10,
        current: 1,
        descs: 'createTime'
      },
      tableData: [], // 列表
      listTable: [
        { prop: 'code', label: '仓库编码', width: '149' },
        { prop: 'name', label: '仓库名称', width: '149' },
        { prop: 'type', label: '仓库类型', width: '149', warehouseType: { // 仓库类型
          ZZ: '中转仓',
          JG: '加工仓',
          CB: '储备仓',
          LC: '冷藏仓'
        }},
        { prop: 'location', label: '省/市/区', width: '149' },
        { prop: 'address', label: '详细地址', width: '149' },
        { prop: 'status', label: '仓库状态', width: '149' },
        { prop: 'surface', label: '仓库面积㎡', width: '149' },
        { prop: 'includedNum', label: '库区数量', width: '149' },
        { prop: 'personName', label: '负责人', width: '149' },
        { prop: 'phone', label: '联系电话', width: '149' },
        { prop: 'createTime', label: '更新时间', width: '149' }
      ]
    }
  },
  computed: {
    title() {
      return this.rowItem.status === 1 ? '停用' : '启用'
    }
  },
  async created() {
    this.fetchList()
  },
  methods: {
    // 确定切换状态
    async submitStatus() {
      if (this.rowItem.status === 1) {
        await putWarehouse({ id: this.rowItem.id, status: 0 })
      } else {
        await putWarehouse({ id: this.rowItem.id, status: 1 })
      }
      this.$message.success('修改成功')
      this.statusShow = false
      this.fetchList()
    },
    CloseFn() { // 关闭弹窗 close
      this.statusShow = false
    },
    changeStatusFn(row) { // 切换状态点击
      this.rowItem = row
    },
    // 新增仓库 路由跳转
    addRouter(id = '') {
      this.$router.push({
        name: 'details',
        params: {
          id
        }
      })
    },
    resetPage() { // 重置搜索
      this.listPage.like_code = ''
      this.listPage.like_name = ''
      this.listPage.status = null
      this.fetchList()
    },
    searchPageFn(val) {
      // 搜索
      console.log(val)
      this.listPage = val
      this.fetchList()
    },
    handleCurrentChange(val) { // 分页器 当前页
      // console.log(val)
      this.listPage.current = val
      this.fetchList()
    },
    handleSizeChange(val) { // 当前页的 条数
      this.listPage.size = val
      this.fetchList()
    },
    async fetchList() {
      const res = await warehousePage(this.listPage)
      console.log(res)
      this.tableData = res.data.records
      this.objData = res.data
    },
    handleClick(row) { // 编辑回显路由地址
      console.log(row)
      this.addRouter(row.id)
      this.$store.commit('user/SET_ADDITEM', row)// 存到了 vuex中
    }
  }

}

</script>

<style lang='scss' scoped>
.padding-all {
  padding: 20px 30px 30px 30px;

  .title_felx {
    display: flex;
    align-items: center;
  }
  .font {
    display: block;
    margin-bottom: 8px;
    color: #887e7e;
    font-size: 12px;
  }
}
::v-deep .el-input__inner {
  background-color: #f8f5f5;
}
.middle-page{
  display: flex;
  justify-content: center;
  align-items: center;
}
.addBtn{
  width: 108px;
  height: 40px;
  background-color: #00be76;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin:0px 0 20px 10px;
}
::v-deep .el-form-item__label{
   font-size: 12px;
   font-weight: 300;
   color: #887e7e;
   height: 40px;
}
</style>
